<ng-container *ngFor="let item of items">
  <div class="link-item-wrapper" *ngIf="showItem(item)">
    <div
      #linkItem
      [ngClass]="{
        'link-item': true,
        active: isActive(item),
        disable: item.disable && item.disable()
      }"
      (click)="onClickItem($event, item)"
    >
      <div *ngIf="item.childItems" class="link-item-button-wrapper">
        <i *ngIf="!minimize" class="fa fa-angle-right"></i>
      </div>
      <a *ngIf="item.path && !item.onClick" routerLink="{{ item.path }}">
        <i class="{{ item.iconClass }}"></i>
        <span [hidden]="minimize">{{ item.title }}</span>
      </a>
      <span *ngIf="item.onClick || item.childItems" [ngStyle]="item.itemStyle">
        <i class="{{ item.iconClass }}"></i>
        <span [hidden]="minimize">{{ item.title }}</span>
      </span>
    </div>
    <div
      #childLinkWrapper
      *ngIf="minimize || item.childItems"
      class="child-link-wrapper"
    >
      <div [hidden]="!minimize" class="child-link-title">
        <a
          *ngIf="item.path"
          (click)="onClickItem($event, item)"
          style="cursor: pointer"
        >
          {{ item.title }}
        </a>
        <span *ngIf="!item.path">{{ item.title }}</span>
      </div>
      <ng-container *ngFor="let childItem of item.childItems">
        <div
          *ngIf="showItem(childItem)"
          [ngClass]="{
            'link-item': true,
            divider: childItem.id === 'divider',
            theme: childItem.id === 'theme'
          }"
        >
          <a
            *ngIf="childItem.id !== 'theme'"
            routerLink="{{ childItem.path }}"
            (click)="onClickItem($event, childItem)"
          >
            <i class="{{ childItem.iconClass }}"></i>
            <span [innerHTML]="childItem.title"></span>
          </a>
          <pp-theme-widget *ngIf="childItem.id === 'theme'"></pp-theme-widget>
        </div>
      </ng-container>
    </div>
  </div>
</ng-container>
